<template>
    <h2 style="margin-bottom: 20px;">当前位置：智能穿戴设备统计-{{ TITLE.equip4 }}</h2>
    <div class="outbox">
        <div>
            <div>
                <h3>管理患者情况</h3>
                <div style="display: flex;justify-content: center;">
                    <bTable id="table" :label="pList.labels" :table-data="pList.list" :total="pList.total" :is-h="[]"
                        :stripe="true" :hasPagin="false" :border="false" :limit="pList.limit">
                    </bTable>
                    <bTable id="table" :label="pList1.labels" :table-data="pList1.list" :total="pList1.total" :is-h="[]"
                        :stripe="true" :hasPagin="false" :border="false" :limit="pList1.limit">
                    </bTable>
                    <bTable id="table" :label="pList2.labels" :table-data="pList2.list" :total="pList2.total" :is-h="[]"
                        :stripe="true" :hasPagin="false" :border="false" :limit="pList2.limit">
                    </bTable>
                </div>
            </div>
            <div style="display: flex;">
                <div>
                    <h3>人数异常情况</h3>
                    <div style="display: flex;">
                        <div id="box11"></div>
                        <div id="box12"></div>
                    </div>
                </div>
                <div>
                    <h3>次数异常情况</h3>
                    <div style="display: flex;">
                        <div id="box21"></div>
                        <div id="box22"></div>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div id="box3"></div>
            <div id="box4"></div>
            <div id="box5"></div>
        </div>
        <div>
            <div style="margin-right: 12px;">
                <h3>体温最新情况</h3>
                <bTable id="table" :label="mList.labels" :table-data="mList.list" :total="mList.total" :is-h="[]"
                    :stripe="true" :hasPagin="false" :border="false" :limit="mList.limit">
                </bTable>
            </div>
            <div style="margin: 0 12px;">
                <h3>心率最新情况</h3>
                <bTable id="table" :label="mList1.labels" :table-data="mList1.list" :total="mList1.total" :is-h="[]"
                    :stripe="true" :hasPagin="false" :border="false" :limit="mList1.limit">
                </bTable>
            </div>
            <div style="margin-left: 12px;">
                <h3>BMI最新情况</h3>
                <bTable id="table" :label="mList2.labels" :table-data="mList2.list" :total="mList2.total" :is-h="[]"
                    :stripe="true" :hasPagin="false" :border="false" :limit="mList2.limit">
                </bTable>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { EDP, TITLE } from "@b/model/enum";
import bTable from "@/components/public/b_table.vue";
import { Main, Tiwen, BMI, Xinlv } from "@b/index/tiwen";
import { onMounted, reactive, ref } from "vue";
import { BoxTopRight } from "../equip/charts/box_top_right";
import { Boxs } from "../equip/charts/box_middle";

const pList = reactive(new Main())
const pList1 = reactive(new Main())
const pList2 = reactive(new Main())
const mList = reactive(new Tiwen())
const mList1 = reactive(new Xinlv())
const mList2 = reactive(new BMI())
const topBoxsHeight = ref(EDP.HEIGHT * 0.3 - 80 + 'px')
const bottomBoxHeight = ref(EDP.HEIGHT * 0.4 - 80 + 'px')
const topBoxsWidth = ref(EDP.WIDTH / 2 + 'px')
const boxsWidth = ref(EDP.WIDTH / 3 + 'px')
const box1 = new BoxTopRight(topBoxsWidth.value, topBoxsHeight.value)
const box2 = new BoxTopRight(topBoxsWidth.value, topBoxsHeight.value)
const box3 = new Boxs(boxsWidth.value, topBoxsHeight.value)
const box4 = new Boxs(boxsWidth.value, topBoxsHeight.value)
const box5 = new Boxs(boxsWidth.value, topBoxsHeight.value)

onMounted(() => {
    box1.init('box11', 'box12')
    box1.changeData('')
    box2.init('box21', 'box22')
    box2.changeData('')
    box3.init('box3', '', ['#60b565', '#5894ff', '#ee5946'])
    box4.init('box4', '', ['#58bcff', '#ffcf48', '#ff8033'])
    box5.init('box5', '', ['#60b565', '#ffcf48', '#ee752f', '#58bcff'])
    box3.changeData([{
        name: '正常体温',
        value: 6
    }, {
        name: '体温偏高',
        value: 15
    }, {
        name: '体温偏低',
        value: 15
    }])
    box4.changeData([{
        name: '正常心率',
        value: 6
    }, {
        name: '心率过快',
        value: 15
    }, {
        name: '心率过缓',
        value: 15
    }])
    box5.changeData([{
        name: '肥胖',
        value: 6
    }, {
        name: '正常',
        value: 15
    }, {
        name: '偏低',
        value: 10
    }, {
        name: '偏重',
        value: 15
    }])
})
</script>

<style scoped>
h3 {
    margin-bottom: 20px;
}

.outbox>div {
    display: flex;
    height: v-bind(topBoxsHeight);
}

.outbox>div:first-child>div {
    width: v-bind(topBoxsWidth);
}

.outbox>div>div {
    width: v-bind(boxsWidth);
}

.outbox>div:last-child {
    height: v-bind(bottomBoxHeight);
}
</style>